<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户列表</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
    <style>
        /* 设置标签容器为flex布局，使标签横向排列 */
        .tag-container {
            display: flex;
            flex-wrap: wrap; /* 如果标签太多，可以换行 */
            gap: 10px; /* 设置标签之间的间距 */
        }

        /* 设置每个标签的样式 */
        .tag-badge {
            padding: 5px 10px; /* 标签内边距 */
            font-size: 14px; /* 标签文字大小 */
        }
    </style>
</head>
<body>
<div class="container mt-5">
    <h1>客户列表</h1>
    <!-- 添加客户按钮 -->
    <form action="/api/client/create" method="POST">
        <input type="text" name="name" placeholder="请输入客户名称" required>
        <button type="submit">添加客户</button>
    </form>
    <!-- 选择显示的客户类型 -->
    <div class="mt-4">
        <label for="clientFilter" class="form-label">选择显示的客户类型：</label>
        <form action="/api/tag/client" method="get">
            <select id="clientFilter" class="form-select" name="filter" onchange="this.form.submit()">
                <option value="all" th:selected="${filter == 'all'}">全部客户</option>
                <option value="new" th:selected="${filter == 'new'}">新客户</option>
                <option value="old" th:selected="${filter == 'old'}">老客户</option>
            </select>
        </form>
    </div>
    <ul class="list-group mt-4">
        <th:block th:each="client : ${clients}">
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <!-- 客户信息 -->
                <div>
                    <span th:text="${client.name}"></span>
                    <div class="mt-2">
                        <!-- 标签添加表单 -->
                        <form th:action="@{/api/client/{id}/add-label(id=${client.id})}" method="POST">
                            <input type="text" name="labelNames" placeholder="输入多个标签（用逗号分隔）" class="form-control" required />
                            <button type="submit" class="btn btn-primary mt-2">添加标签</button>
                        </form>

                        <!-- 显示标签 -->
                        <h3 th:text="${client.name}"></h3>
                        <div>
                            <h4>标签：</h4>
                            <div class="tag-container">
                                <div th:each="tag : ${client.tags}">
                                    <span class="badge bg-primary tag-badge" th:text="${tag.labelName}"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 删除按钮 -->
                <div class="d-flex">
                    <a th:href="@{/api/client/delete/{id}(id=${client.id})}" class="btn btn-danger btn-sm mx-2">删除</a>
                </div>
            </li>
        </th:block>
    </ul>

</div>

<script>
    // 用于保存每个客户的标签
    let clientTags = {};

    // 添加标签到客户
    function addLabels(clientId) {
        const labelNamesInput = document.getElementById("labelNames");
        const labelNames = labelNamesInput.value.trim();

        if (labelNames === "") return;

        // 去除多余的空格和特殊字符
        const labels = labelNames.split(",").map(label => label.trim());

        // 将标签存储到 clientTags 中
        if (!clientTags[clientId]) {
            clientTags[clientId] = [];
        }

        labels.forEach(label => {
            if (!clientTags[clientId].includes(label)) {
                clientTags[clientId].push(label);
            }
        });

        // 更新标签显示区域
        updateTagsDisplay(clientId);
        labelNamesInput.value = ""; // 清空输入框
    }


    // 更新显示标签的区域
    function updateTagsDisplay(clientId) {
        const tagsContainer = document.getElementById(`tags-${clientId}`);
        const tags = clientTags[clientId] || [];

        // 清空现有的标签
        tagsContainer.innerHTML = '';

        // 添加标签到显示区域
        tags.forEach((label, index) => {
            const tagElement = document.createElement('span');
            tagElement.classList.add('badge', 'bg-primary', 'me-2', 'd-inline-block');
            tagElement.textContent = label;

            // 创建删除按钮
            const deleteButton = document.createElement('button');
            deleteButton.classList.add('btn', 'btn-sm', 'btn-danger', 'ms-2');
            deleteButton.textContent = '删除';
            deleteButton.onclick = function() {
                deleteTag(clientId, index);
            };

            // 将标签和删除按钮添加到容器中
            tagsContainer.appendChild(tagElement);
            tagsContainer.appendChild(deleteButton);
        });
    }

    // 删除标签
    function deleteTag(clientId, index) {
        // 删除标签
        clientTags[clientId].splice(index, 1);

        // 更新标签显示
        updateTagsDisplay(clientId);
    }
</script>
</body>
</html>



